<template>
  <div>
    <div style="background-color: #f5f5f5; padding: 20px">
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <b-carousel
              @click="tolink"
              id="carousel-1"
              v-model="slide"
              :interval="4000"
              controls
              indicators
              background="#ababab"
              img-width="1024"
              img-height="480"
              style="text-shadow: 1px 1px 2px #333"
              @sliding-start="onSlideStart"
              @sliding-end="onSlideEnd"
            >
              <b-carousel-slide
                :caption="item.title"
                v-for="(item, index) in imglist"
                :img-src="item.url"
                :key="index"
              >
              </b-carousel-slide>
            </b-carousel>
          </div>
          <div class="col-md-4">
            <a href="/custom/3?id=3&page=1&pagsize=10">
              <div>
                <img
                  width="100%"
                  src="http://www.gdmn88.com/upload/202009/1599527505.png"
                  alt=""
                />
              </div>
              <div>
                <img
                  width="100%"
                  src="	http://www.gdmn88.com/upload/202009/1599527916.png"
                  alt=""
                />
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="imgitem col-md-4">
          <a href="/custom/3?id=1&page=1&pagsize=10">
            <b-img
              src="http://www.gdmn88.com/upload/202009/1599469858.jpg"
              alt=""
            />
            <b-img
              src="http://www.gdmn88.com/upload/202009/1599470204.jpg"
              alt=""
            />
          </a>
        </div>

        <div class="imgitem col-md-4 col-6">
          <a href="/custom/3?id=2&page=1&pagsize=10">
            <b-img
              src="http://www.gdmn88.com/upload/202009/1599470163.jpg"
              alt=""
            />
            <b-img
              src="http://www.gdmn88.com/upload/202009/1599529915.png"
              alt=""
            />
          </a>
        </div>
        <div class="imgitem col-md-4 col-6">
          <a href="/custom/3?id=5&page=1&pagsize=10">
            <b-img
              src="http://www.gdmn88.com/upload/202009/1599470205.jpg"
              alt=""
            />
            <b-img
              src="http://www.gdmn88.com/upload/202009/1599470663.png"
              alt=""
            />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slide: 0,
      sliding: null,
      imglist: [
        {
          url: 'https://zlsc.oss-cn-shenzhen.aliyuncs.com/upload/202306/1597971684.png',
          title: '人才管理',
        },
        {
          url: 'https://zlsc.oss-cn-shenzhen.aliyuncs.com/upload/202306/6c297b6a93a1b8ab81a2d9df5914628.png',
          title: '食堂环境',
        },
        {
          url: 'https://zlsc.oss-cn-shenzhen.aliyuncs.com/upload/202306/45e35e71314beae2faf7fb2b127d198.png',
          title: '食堂环境',
        },
      ],
    }
  },
  methods: {
    tolink() {
      console.log(123)
    },
    onSlideStart(slide) {
      this.sliding = true
    },
    onSlideEnd(slide) {
      this.sliding = false
    },
  },
}
</script>
<style scoped>
.imgitem {
  /* display: flex; */
}
</style>
